<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="styles/main.css">
		<link href="http://www.jiyouh.com/skin/jiyouhui/css/base.css" rel="stylesheet">
		<link href="http://www.jiyouh.com/skin/jiyouhui/css/index.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="http://www.jiyouh.com/skin/jiyouhui/js/mf-pattern/mF_fancy.css">
		<script src="http://www.jiyouh.com/skin/jiyouhui/js/myfocus-2.0.4.min.js"></script>
		<script type="text/javascript" src="jquery-3.1.1.js"></script>
		<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	</head>
    <body>
	    <% include header.ejs %>
	    <div class="container">
	      <div class="row">
	        <div class="col-xs-8">
	          
	          <div class="news">
	            <h2>
	              	<%= cata_name%>
	            </h2>

	            <% for(var i=0; i<articles.length; i++) {%>
	            <div class="blogs">
	              <div class="row">
	                <div class="col-xs-3">
	                  <div class="item"><img src="http://www.jiyouh.com<%=articles[i].img%>"></div>
	                </div>
	                <div class="col-xs-9">
	                  <h3><a href="/article?id=<%= articles[i].aid%>"><%=articles[i].title%></a></h3>
	                  <p><%=articles[i].content%></p>
	                  <p class="more">
	                    <span id="time">2015-03-06</span>
	                    <span class="pull-right">
	                      <span id="reply"><a href="">21条评论</a></span>
	                      <span id="watch">浏览(<a href="">542</a>)</span>
	                    </span>
	                  </p>
	                </div>
	              </div>
	            </div>
	            <% } %>
	          </div>
	        </div>


	        <div class="col-xs-4">
	          <h3>关注我们</h3>
	          <div id="follow">
	            <div class="row">
	              <div class="col-md-3"><a href="" id="xlwb">新浪微博</a></div>
	              <div class="col-md-3"><a href="" id="txwb">腾讯微博</a></div>
	              <div class="col-md-3"><a href="" id="yx">邮箱</a></div>
	              <div class="col-md-3"><a href="" id="wx">微信</a></div>
	            </div>
	          </div>
	          <img src="images/ad.jpg">
	          <div class="article">
	            <ul class="nav nav-tabs" id="myTab" >
	              <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">点击排行</a></li>
	              <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">最新文章</a></li>
	              <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">站长推荐</a></li>
	            </ul>
	            <div class="tab-content">
	                <div role="tabpanel" class="tab-pane active" id="home">
	                  <ul>
	                    <li><a href="">HTC One M9官方图曝光 配置价格一并出炉</a></li>
	                    <li><a href="">中兴“咔咔”运动相机在MWC2015上正式展出 剑指小蚁运动相机</a></li>
	                    <li><a href="">华为荣耀新总裁亮相 称今年重点立足海外</a></li>
	                    <li><a href="">一个女生的十年——手机里一直舍不得删的小说</a></li>
	                    <li><a href="">细节也要看清楚，华为MWC2015智能手表高清图赏</a></li>
	                    <li><a href="">传谷歌今年5月将推出iOS版本Android Wear</a></li>
	                  </ul>
	                </div>
	                <div role="tabpanel" class="tab-pane" id="profile">
	                  <ul>
	                    <li><a href="">中兴“咔咔”运动相机在MWC2015上正式展出 剑指小蚁运动相机</a></li>
	                    <li><a href="">细节也要看清楚，华为MWC2015智能手表高清图赏</a></li>
	                    <li><a href="">华为荣耀新总裁亮相 称今年重点立足海外</a></li>
	                    <li><a href="">传谷歌今年5月将推出iOS版本Android Wear</a></li>
	                    <li><a href="">半年时间苹果iOS 8普及率终于过了75%！</a></li>
	                    <li><a href="">传谷歌今年5月将推出iOS版本Android Wear</a></li>
	                  </ul>
	                </div>
	                <div role="tabpanel" class="tab-pane" id="messages">
	                  <ul>
	                    <li><a href="">HTC One M9官方图曝光 配置价格一并出炉</a></li>
	                    <li><a href="">中兴“咔咔”运动相机在MWC2015上正式展出 剑指小蚁运动相机</a></li>
	                    <li><a href="">华为荣耀新总裁亮相 称今年重点立足海外</a></li>
	                    <li><a href="">一个女生的十年——手机里一直舍不得删的小说</a></li>
	                    <li><a href="">细节也要看清楚，华为MWC2015智能手表高清图赏</a></li>
	                    <li><a href="">传谷歌今年5月将推出iOS版本Android Wear</a></li>
	                  </ul>
	                </div>
	            </div>
	          </div>
	        </div>
	      </div>
	    </div>
	<script type="text/javascript">
	  //设置
	  myFocus.set({
	    id:'myFocus',//ID
	    pattern:'mF_fancy'//风格
	  });
	</script> 
 </body>
</html>
<script>
  $(function () {
      $('#myTab a:first').tab('show');
  })
  $('#myTab a').hover(function (e) {
    e.preventDefault();
    $('li').removeClass('active')
    $(this).addClass('active')
    $(this).tab('show');
  })


  /*$(function(){
    $('data-toggle="tab"').hover(function(){
      $(this).tab('show')
    })
  })*/
</script>
